<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学知鸟</title>
		<link rel="stylesheet" type="text/css" href="share/css/fa/css/font-awesome.min.css" />
		<link rel="shortcut icon" href="share/img/logo.png">
		<script src="share/js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="share/js/vue/vue.3.0.2.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			html {
				height: 100%;
			}

			body {
				font-family: Verdana, Arial, '微软雅黑', '宋体';
				font-size: 14px;
				height: 100%;
				color: #333;
			}

			a {
				text-decoration: none;
				color: inherit;
			}

			.page {
				display: flex;
				flex-direction: column;
				height: 100%;
			}

			header {
				background-color: #09f;
				display: flex;
				color: white;
				padding: 10px 20px;
			}

			h1 {
				font-size: 1.4em;
			}

			h2 {
				font-size: 1.2em;
				color: #eee;
			}

			main {
				flex: auto;
			}

			aside {
				padding: 10px;
				border-right: solid 1px #eee;
				width: 150px;
				overflow: auto;
			}

			iframe {
				width: 100%;
			}

			.flex {
				display: flex;
			}

			.vflex {
				display: flex;
				flex-direction: column;
			}

			.ubar {
				list-style: none;
				list-style-type: none;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.ubar li {
				list-style: none;
				list-style-type: none;
				padding: 5px;
			}

			.ubar a {
				cursor: default;
			}

			.logo {
				height: 40px;
				border-radius: 50%;
				background-color: white;
				padding: 5px;
			}

			.center {
				text-align: center;
			}

			.flex.center,
			.vflex.center {
				justify-content: center;
				align-items: center;
			}

			.auto {
				flex: auto;
			}

			.m-5 {
				margin: 5px;
			}

			.m-10 {
				margin: 10px
			}

			.m-15 {
				margin: 15px
			}

			.mv-5 {
				margin-top: 5px;
				margin-bottom: 5px;
			}

			.mv-10 {
				margin-top: 10px;
				margin-bottom: 10px;
			}

			.mv-15 {
				margin-top: 15px;
				margin-bottom: 15px;
			}

			.mh-5 {
				margin-left: 5px;
				margin-right: 5px;
			}

			.mh-10 {
				margin-left: 10px;
				margin-right: 10px;
			}

			.mh-15 {
				margin-left: 15px;
				margin-right: 15px;
			}

			.menu {
				list-style: none;
				list-style-type: none;
				cursor: pointer;
			}

			.menu li {
				list-style: none;
				list-style-type: none;
				padding: 5px;
			}

			.menu a:hover {
				color: #09f;
			}

			.menu li.active {
				color: #09f;
				font-weight: bold;
			}

			.menu .fa {
				color: #999;
				margin-right: 5px;
			}

			.indent-0 {
				font-weight: bold;
			}

			.indent-1 {
				font-weight: normal;
				margin-left: 10px;
			}

			.indent-2 {
				font-weight: normal;
				margin-left: 20px;
			}

			.indent-3 {
				font-weight: normal;
				margin-left: 30px;
			}

			.fa-chevron-right {
				transform: rotate(0deg);
				transition: 0.1s;
			}

			.fa-chevron-right.open {
				transform: rotate(90deg);
				transition: 0.1s;
			}
		</style>
	</head>
	<body>
		<div id="app" class="page">
			<header>
				<section class="flex center">
					<img src="./share/img/logo.png" class="logo">
					<h1 class="mh-10">学知鸟</h1>
					<h2>- WEB前端学鸟历程</h2>
				</section>
				<section class="auto"></section>
				<ul class="ubar">
					<li><a href="https://c.runoob.com/front-end/61" target="_blank">在线编辑</a></li>
					<li><a @click="changeMode">{{mode==2?"多页模式":"单页模式"}}</a></li>
				</ul>
			</header>
			<main class="flex">
				<aside>
					<ul class="menu">
						<li v-for="item1 in menu" :class="['indent-'+item1.level, {active: item1.url==curUrl}]">
							<div @click="toggleOpen(item1)">
								<template v-if="item1.children">
									<i class="fa fa-chevron-right fa-fw" :class="{open: item1.open}"></i>
								</template>
								<template v-if="item1.url">
									<a :href="item1.url" :target="frame" @click="changeUrl(item1.url)">{{item1.title}}</a>
								</template>
								<template v-else>
									<span>{{item1.title}}</span>
								</template>
							</div>
							<ul v-if="item1.children" v-show="item1.open">
								<li v-for="item2 in item1.children" :class="['indent-'+item2.level, {active: item2.url==curUrl}]">
									<div @click="toggleOpen(item2)">
										<template v-if="item2.children">
											<i class="fa fa-chevron-right fa-fw" v-if="!item2.open"></i>
											<i class="fa fa-chevron-down fa-fw" v-if="item2.open"></i>
										</template>
										<template v-if="item2.url">
											<a :href="item2.url" :target="frame" @click="changeUrl(item2.url)">{{item2.title}}</a>
										</template>
										<template v-else>
											<span>{{item2.title}}</span>
										</template>
									</div>
									<ul v-if="item2.children" v-show="item2.open">
										<li v-for="item3 in item2.children" :class="['indent-'+item3.level, {active: item3.url==curUrl}]">
											<template v-if="item3.url">
												<a :href="item3.url" :target="frame" @click="changeUrl(item3.url)">{{item3.title}}</a>
											</template>
											<template v-else>
												<span>{{item3.title}}</span>
											</template>
										</li>
									</ul>
								</li>
							</ul>
						</li>
					</ul>
				</aside>
				<iframe frameborder="0" name="mainFrame"></iframe>
			</main>
		</div>
		<script type="text/javascript">
			Vue.createApp({
				data() {
					return {
						mode: 1,
						frame: "mainFrame",
						menu: null,
						curUrl: "Vue/L101",
					}
				},
				created() {
					this.loadMenu();
				},
				methods: {
					loadMenu() {
						$.get("menu.txt", res => {
							if (!res) return;
							this.menu = res;
							let model = [],
								parents = [],
								parent = null,
								last = null;
							res.split("\n").forEach(line => {
								if (this.isEmptyLine(line)) return;
								if (this.isCommentLine(line)) return;

								let fields = line.trim().split(/\s+\|\s+/);
								let item = {};
								item.level = this.getStartCount(line, "\t");
								item.title = fields[0];
								if (fields.length > 1) {
									if (fields[1].endsWith(".html")) {
										// HTML文件，不处理
									} else if (fields[1].endsWith("/")) {
										// 目录，附加默认文件
										fields[1] += "index.html";
									} else {
										// 文件，附加默认扩展名
										fields[1] += ".html";
									}
									item.url = "Lesson/" + fields[1];
								}
								item.open = false;

								if (item.level == 0) {
									model.push(item);
								} else {
									if (item.level > last.level) {
										parents.push(last);
									} else if (item.level < last.level) {
										parents.pop();
									} else {
										// do nothing;
									}
									parent = parents[parents.length - 1];
									if (!parent.children) {
										parent.children = [];
									}
									parent.children.push(item);
								}

								last = item;
							});
							this.menu = model;
						});
					},
					changeUrl(url) {
						this.curUrl = url;
					},
					changeMode() {
						this.mode = this.mode == 1 ? 2 : 1;
						this.frame = this.mode == 1 ? "mainFrame" : "_blank";
					},
					toggleOpen(node) {
						node.open = !node.open;
					},
					isEmptyLine: function(line) {
						if (!line) return true;
						return /^\s+$/.test(line);
					},
					isCommentLine: function(line) {
						return /^#/.test(line);
					},
					getStartCount: function(text, delim) {
						if (!text || !delim) return 0;
						let reg = new RegExp("^" + delim + "*");
						return text.match(reg)[0].split(delim).length - 1;
					}
				}
			}).mount("#app");
		</script>
	</body>
</html>
